<!--
 * @Title: 新增产品
 * @Date: 2020-10-16 17:08:26
 * @FilePath: /vue-admin-template/src/views/product/components/addModel.vue
-->
<template>
  <div>
    <el-dialog
      title="新增产品"
      :visible.sync="dialogVisible"
      width="500"
      center>
      <div>
        <el-form ref="form"  label-width="80px">
        <div >
          <el-form-item v-for="(item,index) in formList"  :key="index"   :label="`${item.name}:`">
            <el-input v-if="item.type == 'text'" v-model="item.value"></el-input>
            <el-select v-else-if="item.type=='select'" v-model="item.value"  :placeholder="`请选择${item.name}`" style="width:100%">
              <el-option v-for="(io,i) in item.options" :key="i" :label="io.name" :value="io.id"></el-option>
            </el-select>
            <el-input v-else-if="item.type == 'number'" type="number" v-model="item.value">
                 <template slot="append" v-if="item.unit">{{item.unit}}</template>
            </el-input>
          </el-form-item>
        </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import ProductServices from '@/services/modules/product'
export default {
  name: 'addModel',
  props: {
    value:{ type: Boolean, default: ()=>false }
  },
  data() {
    return {
      dialogVisible: this.value,
      formList:[
        {name: '名称', type: "text",value: '香葱',require: true, originName:'pdName' },
        {name: '图片地址', type: "text",value: 'https://p1.meituan.net/mallimages/d3959d0ded0a684055bbea590705a4dc49436.jpg@100w_100h_1e_1c',require: true, originName:'img' },
        {name: '种类', type: "select", options:[{name:'晨采鲜蔬',id:1},{name:'菌菇大全',id:2}], value: '',require: true, originName:'type' },
        {name: '进价', type: "number", value: 3.5, require: true, originName: 'originPrice', unit: '元'},
        {name: '售价', type: "number", value: 4, require: true, originName: 'outPrice', unit: '元' },
        {name: '进货量', type: "number", value: 20, require: true, originName: 'enterVolume', unit: 'kg' },
        {name: '出货量', type: "number", value: 0,originName: 'outVolume', unit: 'kg' },
        {name: '描述', type: "text", value: '清甜微辣，餐桌调味小能手', require: true, originName: 'desc' }
      ]
    }
  },
  methods:{
    async add() {
      let ErrorMessage = '';
      this.formList.find((item,index) => {
        if(item.require && !item.value){
          ErrorMessage = `${item.name}不能为空`
          return item;
        }
      })
      if(ErrorMessage){
        this.$message.error(ErrorMessage);
        return false
      }
      const param = {}
      this.formList.forEach(item => {
        if(item.value){
          param[item.originName] = item.value
        }
      })
      
      const result = await ProductServices.ADD(param)
      if(result.code === 200) {
        this.dialogVisible = false
        this.$message.success('新增成功!');
        this.$emit('refresh')
      }else{
        this.$message.error(result.data.message);
      }
    }
  },
  watch: {
    dialogVisible(val){
      this.$emit('input',val)
    }
  }
}
</script>
